<!-- 快速注册 -->
<template>
    <div>
        <!-- <div class="bg"></div> -->
        <div>
            <a-form :label-col="{ span: 3 }" :wrapper-col="{ span: 17 }">
                 <a-form-item label="轮播图类型">
                  <a-select v-model="type" style="width: 120px"    >
                    <a-select-option v-for="(one,index) in typeList" :key="one.id">
                        {{ one.name }}
                    </a-select-option>
                    </a-select>
                 </a-form-item>
                <a-form-item label="图片">
                   <a-upload style="width:1000px"
                    list-type="picture-card"
                    :file-list="fileList"
                    @preview="handlePreview"
                    @change="picChange",
                    :remove="removeBanner"
                    >
                    <div v-if="fileList.length < 8">
                        <a-icon type="plus" />
                        <div class="ant-upload-text">
                        Upload
                        </div>
                    </div>
                    </a-upload>
                    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                    <img alt="example" style="width: 100%" :src="previewImage" />
                    </a-modal>
                </a-form-item>
                <a-form-item label=" "  >
                    <a-button type="primary" @click="uploadBanner">立即添加</a-button>
                </a-form-item>
            </a-form>
        </div>
    </div>
</template>

<script>
function getBase64More(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}
import { queryGoodsPicture,updateGoodsPicture  } from '@/api/mall/picture';
import { queryBrand }  from '@/api/brand';
export default {
    data () {
        return {
            brandId: this.global.brandId,
            type:"2",
            typeList:[
                {id:"2",name:'拼拼有礼'}
            ],
            fileList:[],
              previewVisible: false,
            previewImage: '',
        };
    },
    async created(){
        this._queryGoodsPicture()
    },
    methods: {
         _queryGoodsPicture(){  //获取轮播图和详情图
            let _this = this
            const params = {
                'brandId':_this.brandId,
                'type':_this.type
            }
            queryGoodsPicture(params)
            .then(res=>{
                if(res.success){
                    this.fileList=[]
                    res.data.forEach((item,index) => {
                            item.url=item.imageUrl
                            item.uid= -(index+1),
                            item.status='done',
                             item.name='image.png'
                            this.fileList.push(item)
                        });
                        console.log( this.fileList," this.fileList")
                }else{
                    _this.$notification['error']({
                        message: '提示',
                        description: res.errMessage,
                        duration: 8,
                    })
                }
            })
        },
          // 选择图片
            handleCancel() {
            this.previewVisible = false;
            },
            async handlePreview(file) {
            if (!file.url && !file.preview) {
                file.preview = await getBase64More(file.originFileObj);
            }
            this.previewImage = file.url || file.preview;
            this.previewVisible = true;
            },
        //   详情图
            picChange({ fileList }) {
                this.fileList = fileList;
          },
           removeBanner(val){
            if(val.id){
                var _this=this
                var formData = new FormData()
                formData.append('goodsId',val.goodsId)
                formData.append('brandId',val.brandId)
                formData.append('type',val.type)
                formData.append('id',val.id)
                  formData.append('isDelete',1)
                   updateGoodsPicture(formData)
                    .then(res=>{
                        if(res.success){
                            _this.$notification['success']({
                                message: '提示',
                                description: '删除成功',
                                duration: 8,
                            })
                            _this._queryGoodsPicture()
                        }else{
                            _this.$notification['error']({
                                message: '提示',
                                description: res.errMessage,
                                duration: 8,
                            })
                        }
                    })
            }
        },
         uploadBanner(){
            var _this=this
            if(!_this.brandId){
                this.$message.warning('请先选择品牌!')
                return
            }
            var list=this.fileList
            list.forEach(item => {
                if(item.originFileObj){
                    var formData = new FormData()
                    formData.append('brandId',_this.brandId)
                    formData.append('type',_this.type)
                    formData.append('file',item.originFileObj)
                }
                _this._updateGoodsPicture(formData)
            });
        },
        _updateGoodsPicture(formData){
            var _this=this
             updateGoodsPicture(formData)
                .then(res=>{
                    if(res.success){
                        _this.$notification['success']({
                            message: '提示',
                            description: '添加成功',
                            duration: 8,
                        })
                    }else{
                        _this.$notification['error']({
                            message: '提示',
                            description: res.errMessage,
                            duration: 8,
                        })
                    }
                })
        },
      
    }
}

</script>
<style scoped>
.bg{
    height: 600px;
    width: 100%;
    background: linear-gradient(
130deg
, rgb(173, 144, 193) 0%, rgb(3, 0, 84) 100%), linear-gradient(
130deg
, rgb(9, 0, 123) 0%, rgba(15, 0, 66, 0) 30%), linear-gradient(
129.96deg
, rgb(255, 47, 47) 10.43%, rgb(0, 4, 96) 92.78%), radial-gradient(100% 246.94% at 100% 0%, rgb(255, 255, 255) 0%, rgba(37, 0, 66, 0.8) 100%), linear-gradient(
121.18deg
, rgb(20, 0, 255) 0.45%, rgb(27, 0, 62) 100%), linear-gradient(
154.03deg
, rgb(206, 0, 0) 0%, rgb(255, 0, 61) 74.04%), linear-gradient(
341.1deg
, rgb(178, 91, 186) 7.52%, rgb(16, 0, 119) 77.98%), linear-gradient(
222.34deg
, rgb(169, 0, 0) 12.99%, rgb(0, 255, 224) 87.21%), linear-gradient(
150.76deg
, rgb(183, 213, 0) 15.35%, rgb(34, 0, 170) 89.57%);
    background-blend-mode: overlay, normal, overlay, color-burn, screen, overlay, difference, difference, normal;

}

</style>